<template>
    <div>
        <div id="fabu">
          <p @click="back">取消</p>
          <el-button type="danger" @click="submitForm('ruleForm')">发布</el-button>
        </div>
        
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="请输入内容" prop="textarea">
            <el-input type="textarea" v-model="ruleForm.textarea" class="text"></el-input>
            <!-- <el-input
            type="textarea"
            :rows="5"
            multiple='true'
            placeholder="请输入内容"
            
            class="text"
            > -->
            <!-- </el-input> -->
          </el-form-item>
        </el-form>
        <el-upload
        :action="uploadUrl"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :data='uploadData'
        :on-success="handleAvatarSuccess"
        :on-error="uploadError"
        :before-upload="beforeAvatarUpload" class="upload">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>
<script>
import axios from 'axios'
import Cookies from 'js-cookie'
import moment from 'moment'
export default {
    data() {
      return {
        msg:'',////消息提示专用
        uploadUrl:'http://up.qiniup.com',
        uploadData: {key:'',token:''},
        dialogImageUrl: '',
        fileUrl:[],
        dialogVisible: false,
        userName:'',
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          textarea: ''
        },
        id:this.$route.params.id,

        rules: {
          textarea: [
            { required: true, message: '请填写内容', trigger: 'blur' }
          ]
        }
      };
    },
    created(){
      this.getCookie()
    },
    mounted(){
      this.getQiniuToken()
    },
    methods: {
      open() {
          this.$message(this.msg);
      },
      getCookie(){
        let userName=Cookies.get("userName");

        if(userName!=undefined){
            this.userName=userName;
        }else{
            this.$router.push("/login")
        }
      },

      submitForm(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            axios.post('http://localhost:3000/save',{
              userId:this.userName,
              text:this.ruleForm.textarea,
              fileName:this.fileUrl,
              id:this.id
            }).then(res=>{
              console.log(res)
              let response=res.data;
              if(response.status==200){
                this.msg=response.result;
                this.open()
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        
      },
      back(){
        this.$router.go(-1)
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },

      //获取七牛云token
      getQiniuToken(){
        axios.post('http://localhost:3000/token').then(res=>{
          const response=res.data
            this.uploadData.token =response.data.uploadToken
        })
      },
      

      
      handleAvatarSuccess(res, file, fileList) {
        this.$message({
          message: "上传成功",
        });
        
        this.fileUrl.push(file.response.key)

      },
      beforeAvatarUpload(file) {
        console.log(file, 'beforeAvatarUpload')
        // var observable = qiniu.upload(file, key, token, putExtra, config)
        const isPNG = file.type === "image/png";
        const isJPEG = file.type === "image/jpeg";
        const isJPG = file.type === "image/jpg";
        const isLt2M = file.size / 1024 / 1024 < 50;

        // if (!isPNG && !isJPEG && !isJPG) {
        //   this.$message.error("上传头像图片只能是 jpg、png、jpeg 格式!");
        //   return false;
        // }
        // if (!isLt2M) {
        //   this.$message.error("上传头像图片大小不能超过 50MB!");
        //   return false;
        // }
        this.uploadData.key = `upload_pic_${new Date().getTime()}_${file.name}`;
      },
      uploadError(err, file, fileList) {
        console.log(err)
        this.$message({
          message: "上传出错，请重试！",
          type: "error",
          center: true
        });
      },
    }
  }
</script>
<style>
p{
  margin: 0;
}
#fabu{
  width: 100%;
  background:#f5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5em;
}
#fabu>button{
  width: 14%;
}

#fabu>.el-button{
  padding: 6px 6px;
}
.upload{
  padding-top: 1em;
  padding-left: 1em;
}
.text>.el-textarea__inner{
  border: none;
}
.upload .el-upload-list__item{
    width: 100px;
    height: 100px;
}
.upload>.el-upload--picture-card{
    width: 100px;
    height: 100px;
    line-height: 100px;
}



</style>
